import {Component, TemplateRef, OnInit} from '@angular/core';
import {Router} from '@angular/router';
import {Subscription} from 'rxjs';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

declare let window: any, $:any;

import {RequestClientService} from '../../apiServices/request-client.service';
import {NormalService} from '../../apiServices/normal.service';

@Component({
    selector: 'app-top-nav',
    templateUrl: './top-nav.template.html',
    styleUrls: ['/top-nav.style.scss']
})
export class TopNavComponent implements OnInit {
    public language: string = 'en';
    public textConfig: any = {
        '0': {
            en: "Home", zh: "主页"
        },
        '1': {
            en: "Situation", zh: "行业现状"
        },
        '2': {
            en: "Solution", zh: "方案"
        },
        '3': {
            en: "Strength", zh: "优势"
        },
        '4': {
            en: "Whitepaper", zh: "白皮书"
        },
        '5': {
            en: "Team", zh: "团队"
        },
        '6': {
            en: "Roadmap", zh: "路线图"
        },
        '7': {
            en: "Tokenplan", zh: "发行计划"
        },
    };
    private userSubscription: Subscription;
    private logoutSubscription: Subscription;
    private subscribtion: Subscription;

    public user: any = null;
    public showLoginDialog: boolean = false;
    public showLangChange: boolean = false;
    public isLogined: boolean = false;
    public ishideUsercenter: boolean = true;
    public isCollapsed: boolean = true;
    modalRef: BsModalRef;

    constructor(
        private request: RequestClientService,
        private normalService: NormalService,
        private modalService: BsModalService,
        private router: Router,
    ) {
        this.language = request.language;
        this.subscribtion = this.request.request$.subscribe(obj => {
            let cates;
            if (obj.name == 'cates') {
                cates = obj.data.data;
                
            }
        });

        if(normalService.isLogin()){
            this.isLogined = true;
            normalService.getuser();
        }
        this.userSubscription = normalService.user$.subscribe(user=>{
            this.user = user;
            this.isLogined = true;
            this.showLoginDialog = false;
            console.log('top-nav-user', this.user);
        });
        this.logoutSubscription = normalService.logout$.subscribe(logout => {
            if (logout == true){
                this.user = null;
                this.router.navigate(['/']);
            }
        });
    }

    toggleLoginDialog(): void {
        console.log('toggleLoginDialog');
        this.showLoginDialog = !this.showLoginDialog;
        this.isCollapsed = true;
        this.showLangChange = false;
    }

    /**
     * 切换语言的方法
     * @param lang 要切换至的语言，'en/zh'
     */
    changeLanguage(lang): void {
        let langRe = this.request.setLangMessage({type:lang});
        console.log(langRe);
        window.location.reload();
    }

    changeToHash(): void {
        // console.log("changetoHash");
        this.router.navigate(['/home']);
        // this.router.navigate(['/home'],{fragment:"path-team"});
        this.isCollapsed = true;
    }

    toggleLangChange(): void {
        this.showLangChange = !this.showLangChange ;
        if(this.showLangChange == true && this.ishideUsercenter == false){
            this.ishideUsercenter = true;
        }
        if(this.showLangChange == true && this.isCollapsed == false){
            this.isCollapsed = true;
        }
    }

    pathToUserPersonalCenter(): void {
        this.router.navigate(['account']);
        this.ishideUsercenter = !this.ishideUsercenter;
    }

    hideUsercenter(): void {
        this.ishideUsercenter = !this.ishideUsercenter;
        if(this.ishideUsercenter == false && this.showLangChange == true){
            this.showLangChange = false;
        }
        if(this.ishideUsercenter == false && this.isCollapsed == false){
            this.isCollapsed = true;
        }
    }

    isCollapse(): void{
        this.isCollapsed = !this.isCollapsed;
        if(this.isCollapsed == false && this.ishideUsercenter == false){
            this.ishideUsercenter = true;
        }
        if(this.isCollapsed == false && this.showLangChange == true){
            this.showLangChange = false;
        }
    }

    logout(): void {
        this.normalService.loginOut();
        this.ishideUsercenter = !this.ishideUsercenter;
    }

    ngOnInit(): void {
        $(document.getElementById('router-container')).click(()=>{
            this.isCollapsed = true;
            this.ishideUsercenter = true;
        });
    }
}